<template>
	<view class="app-container login-bg">
		<view class="page-head" :style="{top:safetop+'px'}">
			<uni-icons type="arrow-left" color="white" size="30" @click="goBack"></uni-icons>
		</view>
		<view class="login-body">
			<view>
				<image src="/static/owo/DKPLAY-full-logo2.png" class="logo2"></image>
			</view>
			<image src="/static/owo/DKPLAY-full-logo.png" class="logo1"></image>
			<view class="login-top">立即登录，解锁更多会员专属福利</view>
			<!-- <view class="login-bt">将调取微信接口进行登录</view>  -->

			<view class="button-box">
				<!-- <button round class="login-button-return" @click="backToIndex">返回</button> -->
				<button class="login-button-confirm" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">登录</button>
			</view>

			<view class="login-tips">
				<van-checkbox checked-color="#FFE7A5" :value="hasSelect" v-on:change="changeRadio">
					<text class="login-tips-text">我已阅读并同意</text>
					<text class="login-tips-link" @click="gotoRichText('用户协议')">《用户协议》</text>
					<text class="login-tips-text">和</text>
					<text class="login-tips-link" @click="gotoRichText('隐私政策')">《隐私政策》</text>
				</van-checkbox>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loginMiniProgram,
		loadUserInfo
	} from "@/api/user";

	export default {
		name: "index",
		data() {
			return {
				safetop: 10,
				hasSelect: false
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: function(res) {
					// res.safeAreaInsets 包含了 safeAreaInsets.top 和 safeAreaInsets.bottom
					this.safetop = res.safeAreaInsets.top;
				}
			});
		},
		onShow: async function(options) {

			const token = uni.getStorageSync('token')

			// 避免没必要的重复登录
			if (token) {
				await this.loadUserInfo()
				uni.switchTab({
					url: '/pages/mine/index'
				})
			}
		},
		methods: {
			backToIndex() {
				uni.switchTab({
					url: '/pages/mine/index'
				})
			},
			changeRadio(event) {
				this.$set(this, 'hasSelect', event.detail)
			},
			async loadUserInfo() {
				const userRes = await loadUserInfo()
				const userInfo = userRes.data || {}

				const avatar = userInfo.avatar || ''
				const userId = userInfo.user_id || ''
				const nickname = userInfo.nickname || ''
				const referenceCode = userInfo.reference_code || ''
				uni.setStorageSync('avatar', avatar)
				uni.setStorageSync('userId', userId)
				uni.setStorageSync('nickname', nickname)
				uni.setStorageSync('referenceCode', referenceCode)
			},
			getPhoneNumber(e) {
				// 判断是否勾选了协议
				if (!this.hasSelect) {
					uni.showToast({
						title: '请先阅读并同意协议',
						icon: 'none',
						duration: 3000
					})
					return
				}

				const message = e.target.errMsg || ''
				if (message === 'getPhoneNumber:fail user deny') {
					uni.showToast({
						title: '取消登陆',
						icon: 'none',
						duration: 3000
					})
					return;
				}

				const iv = e.detail.iv
				const encryptedData = e.detail.encryptedData

				const that = this
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: async function(event) {
						const {
							code
						} = event
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						const res = await loginMiniProgram({
							type: 'WX-MiniProgram',
							code: code,
							mp_phone: {
								data: encryptedData,
								iv: iv
							}
						})
						const data = res.data || {}
						const token = data.token || ''
						uni.setStorageSync('token', token)

						// 获取用户信息
						await that.loadUserInfo()

						uni.switchTab({
							url: '/pages/mine/index'
						})
					},
					fail: function(err) {
						uni.showToast({
							title: '登录失败' + err.toString(),
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			gotoRichText(type) {
				wx.navigateTo({
					url: `/pages/subPackage/rich-text/index?type=` + type,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "src/static/scss/common";

	.logo1 {
		width: 254rpx;
		height: 48rpx;
	}

	.logo2 {
		width: 174rpx;
		height: 174rpx;
		margin-bottom: 56rpx;
	}

	.page-head {
		position: fixed;
		display: flex;
		top: 0;
		gap: 10px;
		width: 100%;
		// line-height: 88px;
		align-items: center;
		z-index: 100;
	}

	.login-bg {
		width: 100%;
		margin: 0;
		padding: 0;
		background: linear-gradient(to bottom, #42424E, #18181C);
		min-height: 100vh;
		/* 将页面高度设置为视口高度 */
		flex-direction: column;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.login-body {
		width: 600rpx;
		text-align: center;
		color: #fff;
	}

	.login-top {
		margin-top: 48rpx;
		margin-bottom: 48rpx;
	}

	.login-bt {
		font-size: 28rpx;
		color: #8A8A8A;
		margin-top: 16px;
	}

	.button-box {
		padding-top: 64rpx;
		display: flex;
		justify-content: space-between;

		.login-button-confirm {
			width: 686rpx;
			height: 96rpx;
			background: linear-gradient(90deg, #FFFAEC 0%, #FFE7A5 100% 100%);
			color: #000000;
		}
	}

	.login-tips {
		justify-content: center;
		display: flex;
		padding-top: 25rpx;
		height: 32rpx;
		opacity: 1;

		.login-tips-text {
			font-size: 22rpx;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 30rpx;
			color: #FFFFFF;
		}

		.login-tips-link {
			font-size: 22rpx;
			font-weight: 400;
			letter-spacing: 0;
			color: #FFDD86;
		}
	}
</style>